import React from 'react'
import '../assets/css/user.css'
import { NavBar, Icon } from 'antd-mobile';
import ima from '../assets/images/address.png'
import imb from '../assets/images/red_envelopes.png'
import imc from '../assets/images/payment.png'
import imd from '../assets/images/delivery.png'
import ime from '../assets/images/evaluation.png'
import imf from '../assets/images/service.png'
import img from '../assets/images/11.png'
import imh from '../assets/images/12.png'
import imi from '../assets/images/13.png'
import imj from '../assets/images/14.png'
import imk from '../assets/images/15.png'
import iml from '../assets/images/16.png'
class Home extends React.Component {
  render() {
    return (<div>

      <div id="user">
        <NavBar
          className='NavBar'
          icon={<Icon type="left" />}
          onLeftClick={() => console.log('onLeftClick')}
          rightContent={[
            <Icon key="1" type="ellipsis" />,
          ]}
        >我的</NavBar>
        <div className="topbg"></div>
        <div className="userinfo">
          <div className="top clearfix">
            <div className="headpng fleft">
              <img src={ima} alt="" />
            </div>
            <div className="unbox fleft">
              <p className="un">111</p>
              <div className="tip">完善资料让小U更懂您</div>
            </div>
            <div className="rb">
              <img src={imb} alt="" />
              <p>每日签到</p>
            </div>
          </div>
          <div className="data">
            <div className="item">
              <p className="num">12</p>
              <p>我的收藏</p>
            </div>
            <div className="item">
              <p className="num">12</p>
              <p>浏览记录</p>
            </div>
            <div className="item">
              <p className="num rb">0</p>
              <p>我的红包</p>
            </div>
            <div className="item">
              <p className="num">1000</p>
              <p>优惠券</p>
            </div>
          </div>
        </div>
        <div className="iconbox">
          <div className="top">
            <p className="tl">我的订单</p>
            <p className="tr">全部订单</p>
          </div>
          <div className="bot">
            <div className="item">
              <img src={imc} alt="" />
              <p>待付款</p>
            </div>
            <div className="item">
              <img src={imd} alt="" />
              <p>待收货</p>
            </div>
            <div className="item">
              <img src={ime} alt="" />
              <p>评价</p>
            </div>
            <div className="item">
              <img src={imf} alt="" />
              <p>售后/退款</p>
            </div>
          </div>
        </div>
        <div className='tu'>
          <img src={img} alt="" />
        </div>
        <ul>
          <li>
            <img src={imh} alt="" />
            <p>地址管理</p>
          </li>
          <li>
            <img src={imi} alt="" />
            <p>我的钱包</p>
          </li>
          <li>
            <img src={imj} alt="" />
            <p>我的二维码</p>
          </li>
          <li>
            <img src={imk} alt="" />
            <p>我的小伙伴</p>
          </li>
          <li>
            <img src={iml} alt="" />
            <p>0元试用</p>
          </li>
        </ul>
      </div>

    </div>
    )
  }
}
export default Home